<template name="components">
	<view>
		<scroll-view scroll-y class="page">
			<!-- <image src="/static/home1.png" mode="widthFix" class="response"></image> -->
			<view class="nav-list" style="margin-top: 100rpx;">
				<navigator hover-class='none' :url="item.path" class="nav-li" navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<view class="space">
		    <view class="planet">
		        <view class="planet_shadow"></view>
		        <view class="crater1"></view>
		        <view class="crater2"></view>
		        <view class="crater3"></view>
		        <view class="crater4"></view>
		    </view>
		   <view class="stars">
		        <view class="star"> <image src="../../static/home/cc.jpg" mode="aspectFill"></image></view>
		        <view class="star pink"><image src="../../static/home/cc1.jpg" mode="aspectFill"></view>
		        <view class="star blue"><image src="../../static/home/cc2.jpg" mode="aspectFill"></view>
		       <!-- <view class="liuxing yellow"></view> -->
		    </view>
			<view class="stars2">
			    <view class="star2"> <image src="../../static/home/zz1.jpg" mode="aspectFill"></view>
			    <view class="star2 pink"><image src="../../static/home/zz.jpg" mode="aspectFill"></view>
			    <view class="star2 blue"><image src="../../static/home/zz2.jpg" mode="aspectFill"></view>
			   <!-- <view class="liuxing yellow"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				elements: [{
						title: '记忆图文',
						name: 'bar',
						color: 'purple',
						cuIcon: 'vipcard',
						path:'/pages/ILoveU/index'
					},
					{
						title: '记忆短片 ',
						name: 'nav',
						color: 'mauve',
						cuIcon: 'formfill',
						path:'/pages/ILoveU/index2'
					},
					{
						title: '发布图文',
						name: 'list',
						color: 'pink',
						cuIcon: 'list',
						path:'/pages/ILoveU/publish?current=0'
					},
					{
						title: '发布短片',
						name: 'card',
						color: 'brown',
						cuIcon: 'newsfill',
						path:'/pages/ILoveU/publish?current=1'
					},
					// {
					// 	title: '宠宠 ',
					// 	name: 'form',
					// 	color: 'red',
					// 	cuIcon: 'formfill'
					// },
					// {
					// 	title: '宠宠 ',
					// 	name: 'timeline',
					// 	color: 'orange',
					// 	cuIcon: 'timefill'
					// },
					// {
					// 	title: '宠宠 ',
					// 	name: 'chat',
					// 	color: 'green',
					// 	cuIcon: 'messagefill'
					// },
					// {
					// 	title: '宠宠 ',
					// 	name: 'swiper',
					// 	color: 'olive',
					// 	cuIcon: 'album'
					// },
					
				],
			};
		}
	}
</script>

<style lang="scss">
	.page {
		/* height: 100vh; */
	}
	.space {
		position: fixed;
		top: 0;
		left: 0;
	    width: 100%;
	    height:100vh;
	    background: #121212;
	    overflow: hidden;
	}
	
	.planet {
	    width: 150px;
	    height: 150px;
	    border-radius: 50%;
	    background: #333;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin: -75px 0 0 -75px;
	    overflow: hidden;
	    z-index: 2;
	}
	
	.planet_shadow {
	    position: absolute;
	    border-radius: 50%;
	    height: 100%;
	    width: 100%;
	    top: -40%;
	    right: -10%;
	    border: 35px solid rgba(0, 0, 0, .15);
	}
	
	.crater1,
	.crater2,
	.crater3,
	.crater4 {
	    position: absolute;
	    border-radius: 50%;
	    background: rgba(0, 0, 0, .3);
	    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
	}
	
	.crater1 {
	    width: 20px;
	    height: 20px;
	    left: 25%;
	    top: 20%;
	}
	
	.crater2 {
	    width: 10px;
	    height: 10px;
	    left: 50%;
	    top: 60%;
	}
	
	.crater3 {
	    width: 15px;
	    height: 15px;
	    left: 30%;
	    top: 65%;
	}
	
	.crater4 {
	    width: 15px;
	    height: 15px;
	    left: 60%;
	    top: 35%;
	}
	
	.star {
	    display: block;
	    width: 50px;
	    height: 50px;
	   /* border-radius: 50%; */
	    background: #FFF;
	    top: 100px;
	    left: 400px;
	    position: relative;
	    transform-origin: 100% 0;
	    animation: star-ani 6s infinite ease-out;
	    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
	    opacity: 0;
	    z-index: 2;
		image{
			display: inline-block;
			width: 100%;
			height: 100%;
		}
	}
	.star2 {
	    display: block;
	    width: 50px;
	    height: 50px;
	   /* border-radius: 50%; */
	    background: #FFF;
	    top: 100px;
	    left: 0px;
	    position: relative;
	    transform-origin: 100% 0;
	    animation: star2-ani 6s infinite ease-out;
	    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
	    opacity: 0;
	    z-index: 9999;
		image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	// .liuxing {
	//     display: block;
	//     width: 5px;
	//     height: 5px;
	// 	border-radius: 50%;
	//     background: #FFF;
	//     top: 100px;
	//     left: 0px;
	//     position: relative;
	//     transform-origin: 100% 0;
	//     animation: star2-ani 6s infinite ease-out;
	//     box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
	//     opacity: 0;
	//     z-index: 9999;
	// 	&.yellow{
	// 		top: 50px;
	// 		left: 600px;
	// 		background: #ffcd5c;
	// 		animation-delay: 5.8s;
	// 		&:after{
				
	// 			 border-color: transparent transparent transparent #ffcd5c;
	// 			 animation-delay: 5.8s;
				
	// 		}
	// 	}
	// }
	
	.star:after {
	    content: '';
	    display: block;
	    top: 0px;
	    left: 4px;
	    border: 0px solid #fff;
	    border-width: 0px 90px 2px 90px;
	    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
	    transform: rotate(-45deg) translate3d(1px, 3px, 0);
	    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
	    transform-origin: 0% 100%;
	    animation: shooting-ani 3s infinite ease-out;
	}
	
	.pink {
	    top: 30px;
	    left: 405px;
	    background: #ff5a99;
	    animation-delay: 5s;
	    -webkit-animation-delay: 5s;
	    -moz-animation-delay: 5s;
	}
	.star2 {
		
		&.pink {
			left: 5px!important;
		}
	   
	}
	
	.pink:after {
	    border-color: transparent transparent transparent #ff5a99;
	    animation-delay: 5s;
	    -webkit-animation-delay: 5s;
	    -moz-animation-delay: 5s;
	}
	
	.blue {
	    top: 35px;
	    left: 432px;
	    background: cyan;
	    animation-delay: 7s;
	    -webkit-animation-delay: 7s;
	    -moz-animation-delay: 7s;
	}
	.star2 {
		&.blue {
			left: 32px!important;
		} 
	}
	
	.blue:after {
	    border-color: 'transpareanimation-delay: 12s';
	    -webkit-animation-delay: 7s;
	    -moz-animation-delay: 7s;
	    animation-delay: 7s;
	}
	
	.yellow {
	    top: 50px;
	    left: 600px;
	    background: #ffcd5c;
	    animation-delay: 5.8s;
	}
	.star2 .yellow{
		&.blue {
			left: 100px!important;
		} 
		
	}
	
	.yellow:after {
	    border-color: transparent transparent transparent #ffcd5c;
	    animation-delay: 5.8s;
	}
	
	@keyframes star-ani {
	    0% {
	        opacity: 0;
	        transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	    }
	
	    50% {
	        opacity: 1;
	        transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
	        -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
	        -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
	    }
	
	    100% {
	        opacity: 0;
	        transform: scale(2) rotate(0) translate3d(-300px, 300px, 0);
	        -webkit-transform: scale(2) rotate(0) translate3d(-300px, 300px, 0);
	        -moz-transform: scale(2) rotate(0) translate3d(-300px, 300px, 0);
	    }
	}
	@keyframes star2-ani {
	    0% {
	        opacity: 0;
	        transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	    }
	
	    50% {
	        opacity: 1;
	        transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
	        // -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
	        // -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
	    }
	
	    100% {
	        opacity: 0;
	        transform: scale(2) rotate(0) translate3d(300px, 300px, 0);
	        // -webkit-transform: scale(2) rotate(0) translate3d(-300px, 300px, 0);
	        // -moz-transform: scale(2) rotate(0) translate3d(-300px, 300px, 0);
	    }
	}
</style>
